<div class="wrap" [ngClass]="isMobile? 'wrap-mobile':'wrap-pc'">

  <div [ngClass]="isMobile? 'login-window-mobile':'login-window'">
    <div class="text-center logo">
      <div class="img-text">
        <img class="logo-img" src="assets/img/iotlogo.svg" alt="">
        <span class="logo-text">设备管理后台</span>
      </div>
<!--      <img class="logo-img" src="assets/img/login-logo.png" alt="">-->
<!--            <img class="logo-img" src="assets/img/login-logo-wulian.png" alt="">-->
      <div class="tips">请登录您的用户</div>
    </div>

    <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-control nzErrorTip="请输入您的账号!">
          <nz-input-group nzPrefixIcon="user" nzSize="large">
            <input type="text" nz-input formControlName="username" placeholder="账号"/>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control nzErrorTip="请输入你的密码!">
          <nz-input-group nzPrefixIcon="lock" nzSize="large">
            <input type="password" nz-input formControlName="password" placeholder="密码"/>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>

      <div nz-row class="login-form-margin">
        <div nz-col [nzSpan]="17">
          <nz-form-item>
            <nz-form-control nzErrorTip="请输入你的验证码!">
              <nz-input-group nzPrefixIcon="safety-certificate" nzSize="large">
                <input type="text" nz-input formControlName="imageCode" placeholder="验证码"/>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="7" (click)="refreshImageCode()">
          <img class="verify-code" src="{{getCodeUrl}}/image?width=87&height=40&deviceId={{deviceId}}" alt=""
               *ngIf="showImageCode==true">
        </div>
      </div>

      <div nz-row class="margin-bottom">
        <div nz-col [nzSpan]="12">
          <label nz-checkbox formControlName="remember">
            <span>记住密码</span>
          </label>
        </div>
        <div nz-col [nzSpan]="12" (click)="showForgetPassword()">
          <a class="login-form-forgot">忘记密码</a>
        </div>
      </div>
      <button nzSize="large" nz-button class="login-form-button" [nzType]="'primary'" [nzLoading]="isLoading"
              (keyup.enter)="submitForm()">登录
      </button>
    </form>
    <div class="text-center copyright">
      <span>Copyright &copy; {{currentYear}} - {{currentYear + 1}}  </span>
      <a href="">管理后台</a>
    </div>
  </div>
</div>

<app-forget-password #forgetPasswordComponent [forgetPasswordVisible]="forgetPasswordVisible"
                     (settingForgetPassword)="settingForgetPassword($event)"></app-forget-password>
